<template>
  <a-card class="container" :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <a-form-model ref="form" :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        label="账号名"
        prop="username"
      >
        <a-input v-model="form.username" placeholder="请填写账号名" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="密码"
        prop="password"
      >
        <a-input v-model="form.password" placeholder="修改密码,不填则为原密码,不少于6位字符" autocomplete="off"/>
      </a-form-model-item>
      <a-form-model-item
        label="选择权限组"
        prop="group_id"
      >
        <a-select v-model="form.group_id">
          <a-select-option :value="item.id" v-for="(item,index) in groupList" :key="index">
            {{item.title}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item
        label="备注"
      >
        <a-textarea v-model="form.remark" />
      </a-form-model-item>
      <a-form-model-item
        label="状态"
        prop="status"
      >
        <a-switch v-model="form.status" checked-children="开启" un-checked-children="关闭" default-checked />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="btn_wrapperCol">
        <a-button type="primary" @click="onSubmit" :loading='loading'>
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import {editUser} from '@/api/modules/manager'
import {getGroups} from '@/api/modules/permission'

let checkPassword = (rule, value, callback) => {
  //密码判断
  if (value != '') {
    if (value.trim().length < 8) {  
      callback(new Error('密码长度不符合标准'));
    }else if (!/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(value) || !/^\S+/.test(value) || !/\S+$/.test(value)){
      callback(new Error('密码不符合规范'));
    }else{
      callback();
    }
  }else{
    callback();
  }
};

export default {
  name:'groupAdd',
  data(){
    return{
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      form:{
        username:'',
        password:'',
        group_id:'',
        remark:'',
        status:true,
      },
      groupList:[],
      rules:{
        username:[
          {required: true,message: '请填写账号名', trigger: 'blur'}
        ],
        password:[
          { validator: checkPassword, trigger: 'change' }
        ],
        group_id:[
          {required: true,message: '请选择权限组', trigger: 'blur'}
        ]
      },
      loading:false,
    }
  },
  props:{
    id:{
      type:[String,Number]
    }
  },
  created(){
    this.getGroupList()
  },
  methods:{
    getDetail(){
      editUser({id:this.id}).then((res) => {
        if(res.errcode == 0){
          res.data.status = res.data.status == 1?true:false
          this.form = {
            ...this.form,
            ...res.data
          }
        }
      }).catch(() => {
        
      });
    },
    getGroupList(){
      getGroups({}).then((res) => {
        if(res.errcode == 0){
          this.groupList = res.data
          this.getDetail()
        }
      }).catch(() => {
      });
    },
    onSubmit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          this.loading = true
          let form = JSON.parse(JSON.stringify(this.form))
          form.status = form.status?1:0
          form.password = form.password.trim()
          // console.log(form)
          editUser(form).then((res) => {
            this.loading = false
            if(res.errcode == 0){
              this.$message.success('修改成功')
              this.back()
            }
          }).catch(() => {
            this.loading = false
          });
        }
      })
    },
    back(){
      this.$emit('update:mod','normal')
    },
  },
}
</script>

<style lang="less" scoped>
.container{
}
</style>